

/* 页头标题 */
.h_heard_title {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    background-color: rgb(0, 100, 00);
    color: rgb(255, 255, 255);
    border-left: 3px solid rgb(80, 80, 80);
    border-right: 3px solid rgb(80, 80, 80);
    height: 50px;
    font-size: 30px;
}

/* 页头控制包 */
.h_heard {
    background-color: rgb(0, 100, 00);
    color: rgb(255, 255, 255);
    height: 50px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    font-size: 30px;

    /* 左边图标 */
    .h_heard_left_icon {
        display: flex;
        flex-direction: row;
        height: 20px;
    }

    /* 中间 */
    .h_heard_midol {
        flex: 1;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        font-size: 30px;
    }

    /* 右边 */
    .h_heard_right {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
    }
}

/** ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
// 🐸 flex布局
/** ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* 布局*/
.h_flex1 {
    flex: 1;
}

/* 布局*/
.h_flex2 {
    flex: 2;
}



/** ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
// 🐸 flex布局-水平方向
/** ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

.h_flex_row {
    display: flex;
    flex-direction: row;
}

.h_flex_row_between {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
}

.h_flex_row_around {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

.h_flex_row_start {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
}

.h_flex_row_end {
    margin-left: 5px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-end;
}

.h_flex_row_center {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
}

/** ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
// 🐸 flex布局-垂直方向
/** ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.h_flex_column {
    display: flex;
    flex-direction: column;
}

.h_flex_column_between {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-between;
}

.h_flex_column_start {
    margin-left: 5px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.h_flex_column_around {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-around;
}

.h_flex_column_end {
    margin-left: 5px;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-end;
}

.h_flex_column_center {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
}

/** ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
// 🐸 flex布局-对齐
/** ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.h_flex_stretch {
    align-items: stretch;
}

.h_fex_center {
    align-items: center;
}

l .h_flex_start {
    align-items: flex-start;
}

.h_flex_end {
    align-items: flex-end;
}

/** ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
// 🐸 内外边距
/** ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* 外边距_上*/
.h_margin_top_10 {
    margin-top: 10px;
}

/* 外边距*/
.h_margin_5 {
    margin: 5px;
}

/* 内边距*/
.h_padding5 {
    padding: 5px;
}

/* 左右内边距50px*/
.h_padding_left_right_50 {
    padding-left: 50px;
    padding-right: 50px;
}

.h_margin_top_10 {
    margin-top: 10px;
}

/** ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
// 🐸 宽度
/** ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.h_width_80 {
    width: 80px;
}

.h_width_120 {
    width: 120px;
}

.h_width_160 {
    width: 160px;
}

/** ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
// 🐸 滚动条
/** ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.h_overflow {
    overflow: scroll;

    /* firefox */
    scrollbar-color: rgba(144, 146, 152, 0.3) transparent;
    scrollbar-width: 10px;

    /* chrome */
    &::-webkit-scrollbar,
    &::-webkit-scrollbar-track-piece {
        background-color: transparent;
    }

    &::-webkit-scrollbar {
        width: 10px;
        height: 10px;
    }

    &::-webkit-scrollbar-thumb {
        border-radius: 5px;
        background-color: rgb(197, 197, 197);
    }
}

/** 垂直滚动条*/
.h_v_overflow {
    overflow: scroll;
    overflow-x: hidden;

    /* firefox */
    scrollbar-color: rgba(144, 146, 152, 0.3) transparent;
    scrollbar-width: 10px;

    /* chrome */
    &::-webkit-scrollbar,
    &::-webkit-scrollbar-track-piece {
        background-color: transparent;
    }

    &::-webkit-scrollbar {
        width: 10px;
        height: 10px;
    }

    &::-webkit-scrollbar-thumb {
        border-radius: 5px;
        background-color: rgb(197, 197, 197);
    }
}

/** 水平滚动条*/
.h_h_overflow {
    overflow: scroll;
    overflow-y: hidden;
    overflow-x: scroll;
    /* firefox */
    scrollbar-color: rgba(144, 146, 152, 0.3) transparent;
    scrollbar-width: 10px;

    /* chrome */
    &::-webkit-scrollbar,
    &::-webkit-scrollbar-track-piece {
        background-color: transparent;
    }

    &::-webkit-scrollbar {
        width: 10px;
        height: 10px;
    }

    &::-webkit-scrollbar-thumb {
        border-radius: 5px;
        background-color: rgb(197, 197, 197);
    }
}

/** ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
// 🐸 光标
/** ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
// 光标-自动
.h_cursor_auto {
    cursor: auto; //自动
}

// 光标-默认
.h_cursor_default {
    cursor: default; //默认
}

// 光标-隐藏光标
.h_cursor_none {
    cursor: none; //隐藏光标
}

// 光标-内容菜单
.h_cursor_context_menu {
    cursor: context-menu; //内容菜单
}

// 光标-帮助
.h_cursor_help {
    cursor: help; //帮助
}

// 光标-小手指
.h_cursor_pointer {
    cursor: pointer; // 小手指
}

//cursor: progress;//等待 旋转环
//cursor: wait ;//等待
//cursor: cell; //+号带阴影
//cursor: crosshair;//十字光标
//cursor: text;//DIV文本
//cursor: vertical-text;//垂直DIV文本
//cursor: alias;//返回
//cursor: copy; //+
//cursor: move;//箭头移动
//cursor: no-drop;//禁止
//cursor: not-allowed;//禁止
//cursor: e-resize; //箭头↔
//cursor: n-resize; //箭头↕
//cursor: ne-resize; //箭头/
//cursor: nw-resize;//箭头\
//cursor: s-resize;//箭头↕
//cursor: se-resize;//箭头
//cursor: sw-resize;//箭头
//cursor: w-resize;//箭头
//cursor: ew-resize;//箭头
//cursor: ns-resize;//箭头
//cursor: nesw-resize;//箭头
//cursor: nwse-resize;//箭头
//cursor: col-resize;//列拉伸
//cursor: row-resize;//行拉伸
//cursor: all-scroll;//箭头 移动
//cursor: zoom-in; //放大
//cursor: zoom-out; //缩小
//cursor: grab;//小手
//cursor: grabbing;//小手抓住
//-----------------------------------------
// 顶部菜单
.h_top_menu {
    margin: 0px;
    display: flex;
    flex-direction: row;
    justify-content: end;
    background-color: rgb(80, 80, 80);
}

//SVG图标
.h_svg_icon {
    user-select: none;
    cursor: pointer;
    border-radius: 5px;
    background-color: rgb(80, 80, 80);

    &:hover {
        background-color: rgb(196, 196, 196);
    }
}

// 工具图标
.h_tool_icon {
    user-select: none;
    cursor: pointer;

    &:hover {
        background-color: rgb(196, 196, 196);
    }
}